<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<article class="head">
    <header class="headerone">
        <div class="logo"></div>
        <div class="butDz">
            <button class="layui-btn layui-btn-normal" id="signBut">登录</button>
            <button class="layui-btn layui-btn-normal" id="registerBut">注册</button>
        </div>
        <div class="search">
            <input type="text">
            <div class="searchBut">
                <i class="layui-icon">&#xe615;</i>
            </div>
        </div>
    </header>
    <header class="headertow layui-anim layui-anim-upbit">
        <div class="headerNr">
            <div class="logo"></div>
            <div class="butDz">
                <button class="layui-btn layui-btn-normal" id="signBut">登录</button>
                <button class="layui-btn layui-btn-normal" id="registerBut">注册</button>
            </div>
            <div class="search">
                <input type="text">
                <div class="searchBut">
                    <i class="layui-icon">&#xe615;</i>
                </div>
            </div>
        </div>
    </header>
    <div class="headBor"></div>
</article>
<article class="main">
    <div class="mainOne">
        <div class="wcnmb">
            <div class="listTitle">
                <i class="layui-icon">&#xe652;</i>
                <span>短视频</span>
            </div>
        </div>
        <div class="layui-tab layui-tab-card">
            <ul class="mainHede layui-tab-title">
                <li class="layui-this">短视频1</li>
                <li >短视频2</li>
            </ul>
            <div class="twoTab layui-tab-content">
                <div class="layui-row modular layui-tab-item layui-show">
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth" class="layui-anim layui-anim-scale">
                                <img src="img/list.jpg"  alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth">
                                <img src="img/list.jpg" alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth">
                                <img src="img/list.jpg" alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth">
                                <img src="img/list.jpg" alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth">
                                <img src="img/list.jpg" alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="layui-row modular layui-tab-item">
                    <div class="layui-col-xs6 layui-col-md3 listCdsb">
                        <div class="listCd">
                            <div class="listImgWth" class="layui-anim layui-anim-scale">
                                <img src="img/list.jpg"  alt="视频">
                            </div>
                            <h3><a href="#">标题</a></h3>
                            <p>
                                <span class="spsc"><i class="layui-icon">&#xe60e;</i>7:05</span>
                                <span class="spll"><i class="layui-icon">&#xe629;</i>32观看</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="loding">加载更多</button>
    </div>
</article>
<article class="footer">
    <div class="headBor"></div>
    <p>技术支持：府天</p>
</article>
<div id="login">
    <div class="loginNr layui-anim layui-anim-scale">
        <p class="loginTitle">
            <i class="layui-icon" id="shut">&#x1006;</i>
            <span>登录</span>
        </p>
        <form action="?">
            <div class="H20"></div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit="" lay-filter="demo1">登录</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="enroll">
    <div class="loginNr layui-anim layui-anim-scale">
        <p class="loginTitle">
            <i class="layui-icon" id="shutZc">&#x1006;</i>
            <span>登录</span>
        </p>
        <form action="?">
            <div class="H20"></div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重复密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请重复输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit="" lay-filter="demo1">登录</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
<script type="text/javascript">
    //分页
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //elem指定div作为存放容器
        laypage.render({
            elem: 'listPaging',
            count: 90
        });
    });

    //选项卡
    layui.use('element', function(){
      var $ = layui.jquery
      ,element = layui.element;
      //Tab的切换功能，切换事件监听等，需要依赖element模块
      //触发事件
      var active = {
        tabAdd: function(){
          //新增一个Tab项
          element.tabAdd('demo', {
            title: '新选项'+ (Math.random()*1000|0) //用于演示
            ,content: '内容'+ (Math.random()*1000|0)
            ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
          })
        }
      };
    });
</script>
</body>
</html>